<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>深度监视</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<h1>{{ message }}</h1>
			姓名：{{ user.name }} 年龄：{{ user.age }}
			<button type="button" @click="user.age++">年龄增加</button>
			<button type="button" @click="chageUser"> 对象的修改</button>
			<!-- 每当本命年，message就提示本命年 -->
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#box',
				data:{
					user:{
						name:'张三',
						age:18
					},
					message:""
				},
				methods:{
					chageUser(){
						const newUser = {
							name:'李四',
							age:20
						}
						this.user = newUser;
					}
				},
				watch:{
					//整个对象发生改变才触发 某个属性改变是不会触发的
					'user.age':{//被监视的属性
						//deep:true,//开启深度监视 注意只能获取到改之后的值，之前的值获取不到
						handler(nv,ov){//nv新的值 ov改之前的值
							console.log("改之后的值",nv);
							console.log("改之前的值",ov);
							this.message = ''
							if(nv%12==0){
								this.message = '本命年'
							}
						},
						immediate:true//初始化就立即执行一次
					}
				}
			})
		</script>
	</body>
</html>
